<template>
  <div>
    <title1 tit=""></title1>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <div class="house-nav">
      <span v-if="houseObj.floor == 0"
        >{{ houseObj.description }} 一室一厅</span
      >
      <span v-if="houseObj.floor == 1"
        >{{ houseObj.description }} 两室一厅</span
      >
      <span v-if="houseObj.floor == 2"
        >{{ houseObj.description }} 三室一厅</span
      >
      <span v-if="houseObj.floor == 3"
        >{{ houseObj.description }} 三室两厅</span
      >
      <span v-if="houseObj.floor == 4"
        >{{ houseObj.description }} 四室一厅</span
      >
      <div class="house-nav2">
        <van-icon name="envelop-o" />
        <span>虚拟举报</span>
      </div>
    </div>
    <div class="house-jiage">
      <!-- 两端对齐 -->
      <van-row type="flex" justify="space-between">
        <van-col span="6"
          ><span class="house-jiage1">{{ houseObj.price }}/月</span
          ><span>租金</span></van-col
        >
        <van-col span="6">
          <span v-if="houseObj.floor == 0"  style="color:red" 
            > 一室一厅</span
          >
          <span v-if="houseObj.floor == 1" style="color:red"
            >两室一厅</span
          >
          <span v-if="houseObj.floor == 2" style="color:red"
            > 三室一厅</span
          >
          <span v-if="houseObj.floor == 3" style="color:red"
            >三室两厅</span
          >
          <span v-if="houseObj.floor == 4" style="color:red"
            >四室一厅</span
          ><span>房型 </span></van-col
        >
        <van-col span="6">
          <span class="house-jiage1">{{houseObj.areaId}}</span><div style="fontSize:18px">面积</div></van-col
        >
      </van-row>
    </div>
    <div class="foot">
      <van-row type="flex" justify="space-around">
        <van-col span="12">楼层: 低层(共6层)</van-col>
        <van-col span="6">装修: 精装修</van-col>
      </van-row>
      <van-row type="flex" justify="space-around">
        <van-col span="12">类型: 普通住宅</van-col>
        <van-col span="6">朝向: {{houseObj.oriented}}</van-col>
      </van-row>
      <van-row type="flex" justify="space-around">
        <van-col span="21">年代: {{houseObj.year}}年</van-col>
      </van-row>
    </div>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <div>
        <span>李娜</span>
        <span>宜居客服</span>
      </div>

      <van-goods-action-button type="warning" text="微聊" />
      <van-goods-action-button type="danger" text="电话" />
    </van-goods-action>
  </div>
</template>

<script>
import Vue from "vue";
// 引入事件总线
import { EventBus } from "../../../api/event-bus";

import { Lazyload } from "vant";
Vue.use(Lazyload);
import title1 from "../../../components/tit.vue";
export default {
  data() {
    return {
      houseObj: {},
      images: [
         //    动态绑定src需要用require
        require("../../../assets/image/banner1(1).png"),
        require("../../../assets/image/banner2.png"),
        require("../../../assets/image/banner3.png"),
        require("../../../assets/image/banner4.png"),
        require("../../../assets/image/banner5.png"),
        require("../../../assets/image/banner6.png"),
      ],
    };
  },
  methods: {
    onClickIcon() {
      Toast("点击图标");
    },
    onClickButton() {
      Toast("点击按钮");
    },
  },
  components: {
    title1,
  },
  methods: {
    goback() {
      this.$router.replace({ name: "current" });
    },

    async getHouseObj() {
      console.log(this.houseObj.id);
    },
  },
  beforeCreate() {
 console.log('new  beforeCreate');

  },
  created() {

    console.log('new  created');
    // 一进页面就获取current页面传过来的值
    // this.getHouseObj();
    EventBus.$on("houseItem", (params) => {
      this.houseObj = params;
      console.log(params);
    });
  },
  mounted() {
    // console.log(this.houseObj);
  },
};
</script>

<style lang="less" scoped>
img {
  height: 590px;
  width: 750px;
}

.house-nav {
  margin-top: 40px;
  font-size: 30px;
  text-align: center;

  .house-nav2 {
    display: inline-block;
    margin-left: 280px;
    height: 80px;
    text-align: center;
    span {
      display: block;
      font-size: 20px;
    }
  }
}

.house-jiage {
  text-align: center;
  // border: 1px solid #ccc;
  border-radius: 8px;
  margin: 20px;
  box-shadow: 0px 0px 20px 2px #eee;
  span {
    display: inline-block;
    font-size: 35px;
  }
  .house-jiage1 {
    color: red;
  }
}

.foot {
  font-size: 30px;
  .van-col {
    padding-top: 20px;
  }
}

.van-goods-action {
  span {
    font-size: 14px;
    display: block;
  }
}
</style>
